<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>创建我的日记</title>
    <link rel="stylesheet" href="./editormd/css/editormd.css" />
    <link rel="stylesheet" href="./layui-v2.6.8/layui/css/layui.css">
</head>
<body>
<div class="layui-fluid">
    <!-- 内容主体区域 -->
    <div  id="test-editor"  >
       <textarea class="editormd-markdown-textarea"  name="test-editormd-markdown-doc" style="display: none;"></textarea>
    </div>
    <div class="layui-col-md12">
        <!-- 底部固定区域 -->
        <form class="layui-form ">
            <div class="layui-form-item">
                <label class="layui-form-label" style="font-size: large;color: #06b6ef">文章分类</label>
                <div class="layui-inline">
                    <input type="checkbox" name="family" title="生活" value="1">
                    <input type="checkbox" name="family" title="旅游" value="2">
                    <input type="checkbox" name="family" title="随笔" value="3">
                    <input type="checkbox" name="family" title="学习" value="4">
                </div>

                <label class="layui-label " style="font-size: large;color: #06b6ef">文章标题</label>
                <div class="layui-inline ">
                    <input type="text" name="title" placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
            </div>

        </form>


        <div class="layui-btn-group  layui-layout-right" >
            <button type="button" class="layui-btn" onclick="saveOrUpdate()">保存</button>
            <button type="button" class="layui-btn layui-btn-danger" onclick="clearContent()">重置</button>
        </div>
    </div>
</div>

<script src="./js/jquery-2.1.4.min.js"></script>
<script src="./layui-v2.6.8/layui/layui.js"></script>
<script src="./editormd/editormd.min.js"></script>

<script type="text/javascript">

        var testEditor;

        $(function (){
            testEditor = editormd("test-editor", {
                width: "100%",
                height: 440,
                path : './editormd/lib/',
                //markdown : '请记录', // 初始化编辑区的内容
                placeholder:"记录点滴精彩。。",
                codeFold : true,
                syncScrolling : true,
                saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
                searchReplace : true,
                 //watch : false,              // 关闭实时预览

            })
        });
        function getTags(){
            //将页面全部复选框选中的值拼接到一个成一个字符串
            var arr_box = [];
            $('input[type=checkbox]:checked').each(function() {
               arr_box.push($(this).val());
            });

           return arr_box.toString();
        };
        function getTitle(){
            //获取标题内容
            var Title='';
            $('input[type=text]').each(function() {
                Title = $(this).val();
            });

            return Title;
        };
        //查询名字为findCookieName的cookie值
        function getCookie(cookieName) {
            //获取所有的Cookie,在strCookie是一个包含所有cookie的字符串。
            var strCookie = document.cookie;
            //以;为分隔符将所有的cookie进行分割。将获得的所有cookie切割成数组
            var arrCookie = strCookie.split("; ");
            //通过for循环进行遍历arrCookie数组。
            for(var i = 0; i < arrCookie.length; i++){
                //通过=进行分割，将本次循环的cookie分割为名字（等于号前），值（等于号后面）
                var arr = arrCookie[i].split("=");
                //将本次循环的cookie名字与需要查找的cookie进行比较
                if(cookieName == arr[0]){
                    //返回指定cookie的值
                    return arr[1];
                }
            }
            //未查找到指定的cookie返回空。
            return null;
        }

        function saveOrUpdate(){
            var content = testEditor.getMarkdown();
            var date= new Date();
            var tags= getTags();
            var title= getTitle();
            var userId=   getCookie("user_id");

            if(userId == null){
                layer.msg('请登陆后操作。。。',{
                    time:1500
                })
            }


            var  data2 = {
                id: date.getTime(),
                userId:userId,
                title:title,
                content:content,
                datePublished:date,
                tags: tags

            };

            var jsonData=JSON.stringify(data2);
            $.ajax({
                url:'/Account/saveContent',
                type:'POST',
                contentType:'application/json;charset=utf-8',
                data:jsonData,
                success:function (){

                    layer.msg('保存成功',{
                        time:1000
                    })
                   },
                error:function (){
                    alert("error....")
                }

                }
            );
        };
        function clearContent(){
            //信息提示框
            layer.msg('确定清空编辑的内容吗？', {
                time: 0 //不自动关闭
                ,btn: ['是', '否']
                ,yes: function(index){
                    layer.close(index);
                    testEditor.clear()
                }
            });
           

        };


</script>
</body>
</html>

